<script setup lang="ts" name="Demo">
import { ref, reactive } from "vue";

const two2 = [
  '设备名称',
  '设备编号',
  '报修单位',
  '设备型号',
  '报修人',
  '接修人',
  '接修日期',
]
const two = [
  { label: "钢二西中", num: 3, xi: 2 },
  { label: "钢二东", num: 2, xi: 2 },
  { label: "钢二西北", num: 3, xi: 2 },
  { label: "综合组", num: 3, xi: 2 },
  { label: "大通二东门", num: 5, xi: 2 },
  { label: "大通冷加工", num: 3, xi: 2 },
  { label: "大通二西北", num: 3, xi: 2 },
  { label: "大通二西南", num: 8, xi: 2 },
  { label: "大通一东门", num: 3, xi: 2 },
  { label: "五金仓库", num: 3, xi: 2 },
  { label: "钢三堆场", num: 6, xi: 2 },
  { label: "老钢四西", num: 3, xi: 2 },
  { label: "钢二西南", num: 3, xi: 2 },
]
const arr = [
'1. 棚架、门窗、泥板、罩盖、玻璃、门架、滚轮',
'2. 销轴、链条、保险销、片、各部件固定螺栓、轮胎',
'3. 机油、燃油、液压油、传动油、水、水泵、风叶、皮带',
'4. 电解液、桩头、灯光、喇叭、仪表、指示灯、电路系统',
'5. 发动机各工况',
'6. 泵、变矩器、变速箱、差速器、轮边减速器',
'7. 转向系统、制动系统、油缸、油马达、液压阀',
'8. 卷扬升降机构、变幅机构、回转机构、伸缩机构、钢丝绳',
'9. 操纵系统、油、气、管路系统',
'10. 显示器、重量限制器、高度限制器等',
'11. 燃油添加记录',
'12. 额定时间内设备运行时间',
'13. 额定时间内设备故障停机时间',
'14. 保养、修理、故障情况记录',
]
const username = ref('')
// 物料搜索
const obj = reactive([
  '产品工号',
  '产品名称',
  '部件名称',
  '状态',
  '机号',
  '图号',
  '联系人',
  '联系电话',
])
// 审批详情
const obj1 = reactive([
  { label: '申请部门', value: '生产部' },
  { label: '车间', value: '1车间' },
  { label: '班组', value: '2班组' },
  { label: '申请人', value: '张三' },
  { label: '电话', value: '13688889999' },
  { label: '收货地点', value: '小长兴' },
  { label: '产品工号', value: '100200176' },
  { label: '产品名称', value: '印度' },
  { label: '机号', value: '1#' },
  { label: '物料名称', value: '前大梁' },
  { label: '图号', value: 'GYDE-2-3' },
  { label: '件号', value: '1/2' },
  { label: '数量', value: '56' },
  { label: '备注', value: '这是一段备注' },
])


</script>

<template>
  <div>
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe> -->
    <!-- style="background-color: #fafafa;" -->
    <div class="py-3 bg-gray-100" >
      <!-- <van-form>
        <van-cell-group inset>
          <van-field v-for="(item, index) in obj1" :key="index" name="用户名" :label="item.label + '：'"
            v-model="item.value" label-align="right"
            :placeholder="'请输入' + item.label" :rules="[{ required: true, message: '请填写用户名' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            确 认
          </van-button>
        </div>
      </van-form> -->
      <!-- 报修 -->
      <!-- <van-form>
        <van-cell-group inset>
          <van-field v-for="(item, index) in two2" :key="index" name="用户名" :label="item + '：'"
            label-align="right"
            :placeholder="'请输入' + item" :rules="[{ required: true, message: '请填写用户名' }]" />
        </van-cell-group>
        <div class="h-5"></div>
        <van-cell-group inset>
          <van-field label="报修内容" placeholder="请输入" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            确 认
          </van-button>
        </div>
      </van-form> -->

      <!-- 点检 -->
      <!-- <div>
        <van-cell title="检查方法" value="看、试、听" />
        <van-cell title="检查周期" value="每天" />
        <van-cell title="重大问题处理意见" value="" />
        <div class="h-3"></div>
        <div v-for="(item, index) in arr" :key="index" class="p-5 mb-3 rounded-lg bg-white">
          <div class="pb-2">{{ item }}</div>
          <div class="text-right flex">
            <div class=" flex-1"></div>
            <van-radio-group direction="horizontal">
              <van-radio name="1">正常</van-radio>
              <van-radio name="2">异常</van-radio>
              <van-radio name="3">已修好</van-radio>
            </van-radio-group>
          </div>
        </div>
        <van-checkbox shape="square">
          我已阅读 <span class="text-blue-500">《安全章程》</span>
        </van-checkbox>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
              确认上车
          </van-button>
        </div>
      </div> -->
      <!-- 班车 -->
      <!-- <div class="p-5 mb-3 rounded-lg bg-white text-center">
        <div class="mb-3">1号线、东向、3号车、02叉车</div>
        <van-button type="primary" size="small" style="margin-right: 0.75rem">反向</van-button>
        <van-button type="success" size="small" style="margin-right: 0.75rem">开始 </van-button>
        <van-button type="primary" size="small" style="margin-right: 0.75rem">完成 </van-button>
        <van-button type="danger" size="small">收车 </van-button>
      </div>
      <div v-for="(item, index) in two" :key="index" class="p-5 mb-3 rounded-lg bg-white">
        <div class="pb-2">站点{{ index + 1 }}：{{ item.label }}</div>
        <div class="text-right flex">
          <div class="flex-1">
            <div class="flex">
              <div class="pr-2">
                发货{{ item.num }}单
              </div>
              <div v-for="(k, index) in item.num" :key="index">
                <van-icon name="shopping-cart-o" color="red" size="20px" />
              </div>
            </div>
            <div class="flex">
              <div class="pr-2">
                到货{{ item.xi }}单
              </div>
              <div v-for="(k, index) in item.xi" :key="index">
                <van-icon name="point-gift-o" color="green" size="20px" />
              </div>
            </div>
          </div>
          <div>
            <van-button plain type="primary" size="small">查看</van-button>
          </div>
        </div>
      </div> -->
      <div>
        <!-- <van-field label="配送人" model-value="李四" readonly />
        <van-field label="联系电话" model-value="13688882222" readonly /> -->
        <!-- <van-field label="配送人" model-value="输入框只读" readonly />
        <van-field label="配送人" model-value="输入框只读" readonly /> -->
        <!-- <van-steps :active="'3'" direction="vertical" active-icon="success" active-color="#38f">
          <van-step>
            <p>张三 审批完成</p>
            <p class="text-slate-400">生产部班长</p>
            <p class="text-slate-400">2024-04-23 09:32:14</p>
          </van-step>
          <van-step>
            <p>李四 审批完成</p>
            <p class="text-slate-400">生产部经理</p>
            <p class="text-slate-400">2024-04-23 09:32:14</p>
          </van-step>
          <van-step>
            <p>王五 审批完成</p>
            <p class="text-slate-400">物流部计划组</p>
            <p class="text-slate-400">2024-04-23 09:32:14</p>
          </van-step>
          <van-step>
            <p>赵六 审批完成</p>
            <p class="text-slate-400">物流部经理</p>
            <p class="text-slate-400">2024-04-23 09:32:14</p>
          </van-step>
        </van-steps> -->
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 300px;
  text-align: center;
  background-color: #39a9ed;
}
</style>